<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="这是一个 index 页面">
        <meta name="keywords" content="index">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="renderer" content="webkit">
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <meta name="apple-mobile-web-app-title" content="Amaze UI" />
        <title>Amaze UI Admin index Examples</title>

        <link rel="stylesheet" href="assets/css/amazeui.min.css" />
        <link rel="stylesheet" href="assets/css/amazeui.datatables.min.css" />
        <link rel="stylesheet" href="assets/css/app.css">
        <link rel="stylesheet" href="assets/css/com.css" />
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/amazeui.min.js"></script>
        <script src="assets/js/echarts-all-3.js" charset="utf-8"></script>
        <script src="assets/js/china.js"></script>
        <script src="layer/layer.js"></script>

    </head>
    <body data-type="new">
    <script src="assets/js/theme.js"></script>
    <div class="am-g tpl-g">
        <div class="tpl-content-wrapper">
            <div class="container-fluid am-cf">
                <div class="widget am-cf">
                    <div class="widget-head am-cf">
                        <div class="widget-title am-fl">
                            <!-- <span>地域分析</span> -->
                            <!-- 多项 -->
                            <ul class="tabs-nav">
                                <li tag="tpl-echarts"><span class="selected first">地域分析</span></li>
                                <li tag="pieecharts"><span>登录分析</span></li>
                                <li tag="post_echarts"><span>终端分析</span></li>
                            </ul>
                        </div>
                        <div class="widget-function am-fr">
                            <a href="javascript:;" class="am-icon-cog"></a>
                        </div>
                    </div>
                    <!-- widget-head结束 -->
                    <div class="tabs-main">
                        <div class="tabs-con" nav-tag="tpl-echarts">
                            <div class="widget-filter">
                                <div class="filter-group-wrapper">
                                    <div class="filter-date-warpper">
                                        <div class="filter filter-date">
                                            <label class="label">时间:</label>
                                            <ul class="group">
                                                <li class="cur">今天</li>
                                                <li>昨天</li>
                                                <li>最近7天</li>
                                                <li>最近30天</li>
                                            </ul>
                                            <div class="date-customer">
                                                <span class="input-wrap">
                                                    <form action="" class="am-form calendar-form" data-am-validator>
                                                      <input type="text" class="am-form-field calendar" placeholder="起始时间" data-am-datepicker readonly required />
                                                      <!-- <span class="am-icon-calendar"></span> -->
                                                    </form>
                                                </span>
                                                <span class="to">~</span>
                                                <span class="input-wrap">
                                                    <form action="" class="am-form calendar-form" data-am-validator>
                                                      <input type="text" class="am-form-field calendar" placeholder="结束时间" data-am-datepicker readonly required />
                                                      <!-- <span class="am-icon-calendar"></span> -->
                                                    </form>
                                                </span>
                                            </div>
                                            <div class="filter-fold">
                                                <i class="am-icon-angle-double-up"> 收起筛选</i>
                                            </div>
                                        </div>   
                                    </div>
                                    <div class="filter-content-wrapper">
                                        <div class="filter">
                                            <label class="label">渠道筛选:</label>
                                            <ul class="group">
                                                <li class="cur">全部</li>
                                                <li>PC端</li>
                                                <li>移动端</li>
                                                <li>电视端</li>
                                            </ul>
                                        </div>
                                        <div class="filter">
                                            <label class="label">访客:</label>
                                            <ul class="group">
                                                <li class="cur">全部</li>
                                                <li>老访客</li>
                                                <li>新访客</li>
                                            </ul>
                                        </div>
                                        <div class="filter filter-select">
                                            <label class="label">地域:</label>
                                            <select class="select">
                                                <option value="option1">选项一...</option>
                                                <option value="option2">选项二.....</option>
                                                <option value="option3">选项三........</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-summary">
                                <table class="summary">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <span class="text">浏览量(PV)</span>
                                                <div class="value summary-ellipsis">1681</div>
                                            </td>
                                            <td>
                                                <span class="text">访客数(UV)</span>
                                                <div class="value summary-ellipsis">1250</div>
                                            </td>
                                            <td>
                                                <span class="text">IP数</span>
                                                <div class="value summary-ellipsis">1174</div>
                                            </td>
                                            <td>
                                                <span class="text">跳出率</span>
                                                <div class="value summary-ellipsis">86.90%</div>
                                            </td>
                                            <td>
                                                <span class="text">平均访问时长</span>
                                                <div class="value summary-ellipsis">00：04：50</div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="widget-index-filter">
                                <div class="clearfix">
                                    <div class="flash-indicator l">
                                        <a href="javascript:;" class="combobox trackable" id="flash_filter">
                                            <span class="text">指标：</span>
                                            <span id="index_checked" class="flash-indicator-text text" title="日活/月活">日活/月活</span>
                                        </a>
                                        <i class="am-icon-angle-down arrow"></i>
                                    </div>
                                    <div class="flash-indicator-container layer" style="left: 0px; top: 40px;display:none;">
                                        <div class="flash-indicator-groups">
                                            <div class="group clearfix">
                                                <label title="启动用户"><input type="radio" text="启动用户" name="doc-radio-1">启动用户</label>
                                                <label title="累计启动用户"><input type="radio" text="累计启动用户" name="doc-radio-1" checked="checked">累计启动用户</label>
                                                <label title="日活/月活"><input type="radio" text="日活/月活" name="doc-radio-1">日活/月活</label>
                                            </div>
                                        </div>
                                        <div class="tips">
                                            <div class="tips-content">
                                                提示：可同时选择<span class="max-flash-indicator-num">1</span>项
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div style="height:450px" class="widget-body-md widget-body tpl-amendment-echarts am-fr" id="tpl-echarts"></div>
                            <div class="widget-table-filter">
                                <div class="download-right-bar">
                                    <i class="am-icon-download highlight">&nbsp;导出文件</i>
                                </div>
                                <div class="clearfix">
                                    <div class="table-indicator-custom-btn l">
                                        <i class="am-icon-star table-filter">&nbsp;自定义指标</i>
                                    </div>
                                    <div class="table-indicator" style="display:none;">
                                        <div class="shortcuts">
                                            <div class="tips-content">
                                                提示：可同时选择<span class="max-flash-indicator-num">6</span>项
                                            </div>
                                        </div>
                                        <div class="flash-indicator-groups">
                                            <div class="group clearfix">
                                                <label class="groupName">网站基础指标:</label>
                                                <div class="am-form-group" style="overflow:hidden;">
                                                    <label class="am-checkbox-inline">
                                                        <input type="checkbox" value="option1">浏览量
                                                    </label>
                                                    <label class="am-checkbox-inline">
                                                        <input type="checkbox" value="option2">浏览量占比
                                                    </label>
                                                    <label class="am-checkbox-inline">
                                                        <input type="checkbox" value="option3">访客数
                                                    </label>
                                              </div>
                                            </div>
                                            <div class="group clearfix">
                                                <label class="groupName">网站基础指标:</label>
                                                <div class="am-form-group" style="overflow:hidden;">
                                                    <label class="am-checkbox-inline">
                                                        <input type="checkbox" value="option1">浏览量
                                                    </label>
                                                    <label class="am-checkbox-inline">
                                                        <input type="checkbox" value="option2">浏览量占比
                                                    </label>
                                                    <label class="am-checkbox-inline">
                                                        <input type="checkbox" value="option3">访客数
                                                    </label>
                                              </div>
                                            </div>
                                        </div>
                                        <div class="table-indicator-btn">
                                            <a href="javascript:;" class="btn btn-focused">确定</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-table">
                                <table class="table am-table am-table-compact am-table-striped tpl-table-black">
                                    <thead>
                                        <tr>
                                            <td>浏览量(PV)</td>
                                            <td>访客数(UV)</td>
                                            <td>IP数</td>
                                            <td>跳出率</td>
                                            <td>平均访问时长</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1681</td>
                                            <td>1250</td>
                                            <td>1174</td>
                                            <td>86.90%</td>
                                            <td>00：04：50</td>
                                        </tr>
                                        <tr>
                                            <td>1681</td>
                                            <td>1250</td>
                                            <td>1174</td>
                                            <td>86.90%</td>
                                            <td>00：04：50</td>
                                        </tr>
                                        <tr>
                                            <td>1681</td>
                                            <td>1250</td>
                                            <td>1174</td>
                                            <td>86.90%</td>
                                            <td>00：04：50</td>
                                        </tr>
                                        <tr>
                                            <td>1681</td>
                                            <td>1250</td>
                                            <td>1174</td>
                                            <td>86.90%</td>
                                            <td>00：04：50</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- tabs-con结束 -->
                        <div nav-tag="pieecharts" class="tabs-con" style="display:none;">
                            <div class="widget-filter">
                                <div class="filter-group-wrapper">
                                    <div class="filter-date-warpper">
                                        <div class="filter filter-date">
                                            <label class="label">时间:</label>
                                            <ul class="group">
                                                <li class="cur">今天</li>
                                                <li>昨天</li>
                                                <li>最近7天</li>
                                                <li>最近30天</li>
                                            </ul>
                                            <div class="date-customer">
                                                <span class="input-wrap">
                                                    <form action="" class="am-form calendar-form" data-am-validator>
                                                      <input type="text" class="am-form-field calendar" placeholder="起始时间" data-am-datepicker readonly required />
                                                      <!-- <span class="am-icon-calendar"></span> -->
                                                    </form>
                                                </span>
                                                <span class="to">~</span>
                                                <span class="input-wrap">
                                                    <form action="" class="am-form calendar-form" data-am-validator>
                                                      <input type="text" class="am-form-field calendar" placeholder="结束时间" data-am-datepicker readonly required />
                                                      <!-- <span class="am-icon-calendar"></span> -->
                                                    </form>
                                                </span>
                                            </div>
                                            <div class="filter-fold">
                                                <i class="am-icon-angle-double-up"> 收起筛选</i>
                                            </div>
                                        </div>   
                                    </div>
                                    <div class="filter-content-wrapper">
                                        <div class="filter">
                                            <label class="label">终端:</label>
                                            <ul class="group">
                                                <li class="cur">全部</li>
                                                <li>MAC</li>
                                                <li>Android-Phone</li>
                                                <li>Android-Pad</li>
                                                <li>PC</li>
                                                <li>IOS-Phone</li>
                                                <li>IOS-Pad</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-summary">
                                <table class="summary">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <span class="text">浏览量(PV)</span>
                                                <div class="value summary-ellipsis">1681</div>
                                            </td>
                                            <td>
                                                <span class="text">访客数(UV)</span>
                                                <div class="value summary-ellipsis">1250</div>
                                            </td>
                                            <td>
                                                <span class="text">IP数</span>
                                                <div class="value summary-ellipsis">1174</div>
                                            </td>
                                            <td>
                                                <span class="text">跳出率</span>
                                                <div class="value summary-ellipsis">86.90%</div>
                                            </td>
                                            <td>
                                                <span class="text">平均访问时长</span>
                                                <div class="value summary-ellipsis">00：04：50</div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div style="height:450px" class="widget-body-md widget-body tpl-amendment-echarts am-fr" id="pieecharts"></div>
                        </div>
                        <!-- tabs-con结束 -->
                        <div nav-tag="post_echarts" class="tabs-con" style="display:none;">
                            <div class="widget-filter">
                                <div class="filter-group-wrapper">
                                    <div class="filter-date-warpper">
                                        <div class="filter filter-date">
                                            <label class="label">时间:</label>
                                            <ul class="group">
                                                <li class="cur">今天</li>
                                                <li>昨天</li>
                                                <li>最近7天</li>
                                                <li>最近30天</li>
                                            </ul>
                                            <div class="date-customer">
                                                <span class="input-wrap">
                                                    <form action="" class="am-form calendar-form" data-am-validator>
                                                      <input type="text" class="am-form-field calendar" placeholder="起始时间" data-am-datepicker readonly required />
                                                      <!-- <span class="am-icon-calendar"></span> -->
                                                    </form>
                                                </span>
                                                <span class="to">~</span>
                                                <span class="input-wrap">
                                                    <form action="" class="am-form calendar-form" data-am-validator>
                                                      <input type="text" class="am-form-field calendar" placeholder="结束时间" data-am-datepicker readonly required />
                                                      <!-- <span class="am-icon-calendar"></span> -->
                                                    </form>
                                                </span>
                                            </div>
                                            <div class="filter-fold">
                                                <i class="am-icon-angle-double-up"> 收起筛选</i>
                                            </div>
                                        </div>   
                                    </div>
                                    <div class="filter-content-wrapper">
                                        <div class="filter">
                                            <label class="label">终端:</label>
                                            <ul class="group">
                                                <li class="cur">全部</li>
                                                <li>PC端</li>
                                                <li>移动端</li>
                                                <li>机顶盒</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div style="height:800px; width:100%;" class="widget-body-md widget-body tpl-amendment-echarts am-fr" id="post_echarts"></div>
                        </div>
                        <!-- tabs-con结束 -->
                    </div>
                    <!-- tabs-main结束 -->
                </div>
            </div>
        </div>
    </div>
    <script src="assets/js/com.js"></script>
    <script src="assets/js/indexjs/region.js"></script>
    <script>
    echarts_show.init("tpl-echarts");
    // 点击选项
    $(".group").find("li").on("click",function(){
        $(this).parent("ul").find("li").removeClass("cur");
        $(this).addClass("cur");
    });
    // 栏目切换
    $(".tabs-nav").find("span").on("click",function(){
        //样式修改
        $(this).parent("li").parent("ul").find("span").removeClass("selected");
        $(this).addClass("selected");
        //tab修改
        var tag = $(this).parent("li").attr("tag");
        $(".tabs-con").css("display","none");
        $("[nav-tag = '"+tag+"']").css("display","block");
        echarts_show.init($(this).parent("li").attr("tag"));
    });
    //收起筛选框
    panelFold.init({"el":".filter-fold","obj":".filter-content-wrapper"});
    
    //绑定radio的改变监听事件
    var radio_monitor = {
        el:"",  //需要改变的值
        init:function(options){
            this.el = options.el;
            this.filterShow();
            this.loadMonitor();
            this.changeMonitor();
        },
        //指标筛选显示
        filterShow:function(){
            $(".widget-index-filter .flash-indicator").find("a").on("click",function(){
                if($(".flash-indicator-container").css("display") == "none"){
                    $(".widget-index-filter .flash-indicator-container").css("display","block");
                    $(this).parent(".flash-indicator").find("i").removeClass("am-icon-angle-down").addClass('am-icon-angle-up').addClass("filter-show");
                }else if($(".flash-indicator-container").css("display") == "block"){
                    $(".widget-index-filter .flash-indicator-container").css("display","none");
                    $(this).parent(".flash-indicator").find("i").removeClass("am-icon-angle-up").removeClass("filter-show").addClass('am-icon-angle-down');
                }
            })
            $(".widget-index-filter .flash-indicator").find("i").on("click",function(){
                if($(".flash-indicator-container").css("display") == "none"){
                    $(this).parent("div").siblings(".flash-indicator-container").css("display","block");
                    $(this).removeClass("am-icon-angle-down").addClass('am-icon-angle-up').addClass("filter-show");
                }else if($(".flash-indicator-container").css("display") == "block"){
                    $(this).parent("div").siblings(".flash-indicator-container").css("display","none");
                    $(this).removeClass("am-icon-angle-up").removeClass("filter-show").addClass('am-icon-angle-down');
                }
            })
        },
        //加载初始化
        loadMonitor:function(){
            $(this.el).attr("title",$("input[type='radio']:checked").parent("label").attr("title"));
            $(this.el).text($("input[type='radio']:checked").parent("label").attr("title"));
        },
        //改变radio选中
        changeMonitor:function(){
            var that = this;
            $(":radio").on("click",function(){
                $(that.el).attr("title",$(this).parent("label").attr("title"));
                $(that.el).text($(this).parent("label").attr("title"));
            })
        }
    }
    radio_monitor.init({
        "el":"#index_checked"
    });
    </script>
    </body>
</html>